<template>
    <div class="oneTabBox" :class="{'oneTabBox2':styleType==2,'oneTabBox-mini':size=='mini'}">
        <div class="otItem" v-for="dt in lists" :key="dt[keyValue]" :class="{'selected':index==dt[keyValue]}" @click="setTab(dt[keyValue])">
            {{dt[key]}}
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{
        modelValue:Number,
        key:{
            type:String,
            default:'name'
        },
        keyValue:{
            type:String,
            default:'id'
        },
        lists:{
            type:Array,
            default:[]
        },
        styleType:{
            type:Number,
            default:1
        },
        size:String  //  medium / small / mini
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            index:''
        })

        onMounted(()=>{
            if(props.modelValue){
                state.index = props.modelValue
            }else if(props.lists.length>0){
                state.index = props.lists[0][props.keyValue]
            }
        })

        const setTab = (id)=>{
            context.emit('update:modelValue', id)
            if(state.index!= id){
               state.index = id
               context.emit('onChange',id) 
            }
            
        }

        return{
            ...toRefs(state),
            setTab
        }
    }
}
</script>

<style lang="scss" scoped>
    .oneTabBox{
        display: flex;
        font-size: 22px;
        font-weight: 500;
        color: #FFFFFF;
        font-family: Inter-Medium, Inter;
        .otItem{
            font-size: 32px;
            height: 60px;
            line-height: 60px;
            padding: 0 20px;
            margin: 0;
            font-weight: 500;
            color: #67F8FF;
            &.selected{
                background: url(/images/gloabAdSplace/zh.png) left top no-repeat;
                background-size:100% 100%;
            }
        }
        &.oneTabBox2{
            //background-image: url(/images/otb2.png) ;
            .otItem{
                height: 70px;
                line-height: 70px;
                background: rgba(26,117,251,0.3000);
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
                font-family: Inter-Medium, Inter;
                font-weight: 500;
                font-size: 26px;
                color: #fff;
                &+.otItem{
                    margin-left: 5px;
                }
                &.selected{
                    background: url(/images/otb2.png) left top no-repeat;
                    background-size:100% 100%;
                    color:#67F8FF;
                }
            }
        }
        &.oneTabBox-mini{
            .otItem{
                height: 55px !important;
                line-height: 55px !important;
                font-size: 22px !important;
            }
        }
    }
</style>